<template>
  <div>
    <Header>
      <Menu mode="horizontal" theme="dark" active-name="1">
        <router-link to="/">
          <div class="layout-logo">
            <img src="@/assets/WechatIMG886.png" alt="" /></div
        ></router-link>
        <div class="layout-nav">
          <!-- <MenuItem name="1">
            <Icon type="ios-navigate"></Icon>
            Item 1
          </MenuItem>
          <MenuItem name="2">
            <Icon type="ios-keypad"></Icon>
            Item 2
          </MenuItem>
          <MenuItem name="3">
            <Icon type="ios-analytics"></Icon>
            Item 3
          </MenuItem> -->
          <router-link to="/">
            <MenuItem name="4" v-if="backShow">
              <Icon type="md-arrow-round-back" />
              返回首页
            </MenuItem></router-link
          >
        </div>
      </Menu>
    </Header>
  </div>
</template>
<script>
export default {
  data () {
    return {
      backShow: false
    }
  },
  components: {},
  computed: {},
  methods: {
    showBack () {
      if (this.$route.path !== '/') {
        this.backShow = true
      }
    }
  },
  created () {},
  mounted () {
    this.showBack()
  }
}
</script>
<style lang="less" scoped>
body {
  margin: 0;
  padding: 0;
}

.layout-logo {
  // width: 100px;
  // height: 30px;
  // background-image: './assets/WechatIMG886.png';
  // border-radius: 3px;
  float: left;
  position: absolute;
  top: 0.8vh;
  left: 1.4vw;
  img {
    height: 6.1vh;
    width: 3.47vw;
  }
}
.layout-nav {
  width: 29.17vw;
  margin: 0 auto;
  margin-right: 1.39vw;
}
.ivu-menu-dark {
  background: #faac58;
}
.ivu-layout-header {
  background: #faac58;
  padding: 0 50 px;
  height: 64 px;
  line-height: 64px;
}
.ivu-menu-item {
  margin-left: 20vw;
  font-size: 16px;
}
</style>
